<template>
  <view :style="theme" class="content">
    <view class="box_config">
      <view class="left">
        <u-tabs :list="tabList" lineHeight="1" :scrollable="false" :activeStyle="{fontWeight: 'bolder',fontSize: '28rpx',color: '#222222'}" :inactiveStyle="{fontSize: '28rpx'}" @click="tabclick" :current="active"></u-tabs>
      </view>
      <view class="sxBtn" @click="showPop=true">
        <image :src="imgHost+'/ic_shaixuan.png'" mode="widthFix"></image>筛选
      </view>
    </view>
    <u-popup :show="showPop" round mode="bottom">
      <view class="popcnt">
        <view class="popBt">
          筛选
          <u-icon name="close" @click="showPop =false" custom-style="position: absolute;right: 30rpx;top: 10rpx" size="40rpx" color="#999" />
        </view>
        <view class="sxBt">
          下单时间
        </view>
        <view class="flex sxUl">
          <view v-for="(item, index) in timeKjlist" :key="index" :class="item.time[0] == date[0] && item.time[1] == date[1]?'on':''" @click="timeClick(item)">
            {{ item.name }}
          </view>
        </view>
        <view class="sxBt">
          自定义
        </view>
        <view class="timeHead flex" @click="onDisplay">
          <text>{{ date[0] || '开始日期' }}</text>
          -
          <text>{{ date[1] || '结束日期'}} </text>
        </view>
        <view class="sxBt">
          订单来源
        </view>
        <view class="flex sxUl">
          <view v-for="(item, index) in lyList" :key="index" :class="szLy.indexOf(item.value) > -1?'on':''" @click="szlyBtn(item)">
            {{ item.name }}
          </view>
        </view>
        <view class="sxBt">
          订单类型
        </view>
        <view class="flex sxUl">
          <view v-for="(item, index) in lxList" :key="index" :class="szLx.indexOf(item.id) > -1?'on mb3':'mb3'" @click="szBtn(item)">{{ item.name }}</view>
        </view>
        <view class="flex flex_between">
          <view class="czBtn" @click="czBtn">重置</view>
          <view class="tjBtn" @click="jumSearch">确认</view>
        </view>

      </view>
    </u-popup>
    <view v-for="(item, index) in list" :key="index" class="orderLi">
      <view class="head flex flex_between" @click="jumpdesc(item)">
        <view class="left">
          <image v-if="item.venueName" :src="imgHost+'/ic_changguan.png'" mode="widthFix" class="locationImg"></image>
          {{item.venueName || ''}}
        </view>
        <view class="right" :class="item.payStatus == 0?'ztColor':''">
          {{item.moduleInfo &&item.moduleInfo.logisticStatusName&& item.payStatus != 5?item.moduleInfo.logisticStatusName:item.payStatus == 0?'待支付':item.payStatus == 1?'超时未支付':item.payStatus == 2?'取消支付':item.payStatus == 3?'支付成功':'退款成功'}}
        </view>
      </view>
      <view v-if="item.moduleInfo && item.moduleInfo.detailList && item.moduleInfo.detailList.length > 0" class="orderDetail" @click="jumpdesc(item)">
        <block v-if="(item.orderType != '12' && item.orderType != '06') || (item.moduleInfo.detailList.length < 4)">
          <view v-for="(em, ss) in item.moduleInfo.detailList" :key="ss" class="detail flex">
            <image v-if="em.imgUrl" :src="em.imgUrl" class="left" @click="previewImg(em.imgUrl)"></image>
            <image v-else-if="item.orderType=='11'" :src="imgHost+'/default_duibi.png'" class="left"></image>
            <image v-else-if="item.orderType=='18'" :src="imgHost+'/default_hire_b.png'" class="left"></image>
            <image v-else-if="item.orderType=='13'" :src="imgHost+'/default_shunjian.png'" class="left"></image>
            <image v-else-if="item.orderType=='05'" :src="imgHost+'/default_kaika.png'" class="left"></image>
            <image v-else-if="item.orderType=='04' || item.orderType=='03'" :src="imgHost+'/default_ticket.png'" class="left"></image>
            <image v-else-if="item.orderType=='01'" :src="imgHost+'/default_chongzhi.png'" class="left"></image>
            <image v-else-if="item.orderType=='20'" :src="imgHost+'/default_shouxufei.png'" class="left"></image>
            <image v-else :src="imgHost+'/default_tongyong.png'" class="left"></image>
            <view class="right">
              <view class="name flex flex_between">
                <text class="limit-1-line">{{em.name}}</text>
                <text v-if="em.price || em.price == 0">¥{{em.price}}</text>
              </view>
              <view class="time flex flex_between">
                <text v-if="em.skuInfo" class="limit-1-line">{{item.orderType == '11'?'设备：':item.orderType == '05'?'开卡等级：':item.orderType == '18'?'收费标准：':item.orderType=='19'?'':'规格：'}}{{em.skuInfo}}</text>
                <text v-else-if="em.useTime" class="limit-1-line">{{item.orderType == '08'?'活动时间':item.orderType == '07'?'课程时间':item.orderType == '04'?'有效期':'适用时间'}}：{{em.useTime}}</text>
                <text v-else-if="em.useItem" class="limit-1-line">{{item.orderType == '03'?'适应项目：':item.orderType=='19'?'适用项目：':''}}{{em.useItem}}</text>
                <text v-else class="limit-1-line"></text>
                <text v-if="em.num">x{{em.num}}</text>
              </view>
            </view>
          </view>
        </block>
        <view v-else class="hdDetail flex">
          <scroll-view scroll-x class="left">
            <image v-for="(em, ss) in item.moduleInfo.detailList" :key="ss" :src="em.imgUrl"></image>
          </scroll-view>
          <view class="right">
            <view class="price">
              ¥{{item.realPrice || item.realPrice === 0?item.realPrice:item.originalPrice}}
            </view>
            <view class="num">
              共{{item.moduleInfo.detailList.length}}件
            </view>
          </view>
        </view>
      </view>
      <view class="orderFoot flex flex_between">
        <view class="left" @click="jumpdesc(item)">
          <block v-if="item.payStatus!='1' && item.payStatus!='2'">
            {{item.payStatus == 2 || item.payStatus == 0|| item.payStatus == 1?'需付款：':'实付款：'}}

            <text>¥{{item.realPrice || item.realPrice === 0?item.realPrice:item.originalPrice}}</text>
          </block>
        </view>
        <view v-if="item.orderType == '02' || item.orderType == '03'|| item.orderType == '04'|| item.orderType == '06'|| item.orderType == '07' || item.orderType == '20'|| item.orderType == '08'|| item.orderType == '11'|| item.orderType == '12'|| item.orderType == '13' || item.orderType == '18'|| item.orderType == '19'" class="right flex">
          <view v-if="item.payStatus == 0" @click="DCdk(item)">取消订单</view>
          <view v-if="item.payStatus == 0 && item.orderType != '12'" class="on" @click="continueToPay(item)">继续支付</view>
          <view v-if="item.payStatus == 3 && ((item.orderType == '02' || item.orderType == '03'||(item.orderType == '06'&& item.moduleInfo && (item.moduleInfo.logisticStatus === '3' || item.moduleInfo.logisticStatus === '4')) ||item.orderType == '19'|| item.orderType == '04'|| item.orderType == '08' || (item.orderType == '07' && item.moduleInfo.courseFlag == '2')))" @click="CDTD(item)">申请退款</view>
          <view v-if="(item.payStatus == 1 || item.payStatus == 2 || item.payStatus == 5) && (item.orderType == '02' || item.orderType == '03'|| item.orderType == '04'|| item.orderType == '13')" @click="deleBtn(item)">删除订单</view>
        </view>
      </view>
    </view>
    <u-loadmore v-if="end && list.length >= 10" :status="status" line />
    <view v-if="list.length === 0" class="no-order">
      <image :src="imgHost+'/default_nodata.png'"></image>
      <view>暂无数据</view>
    </view>
    <u-calendar :defaultDate="defaultDateMultiple" monthNum="4" :color="color" :minDate="minDate" :maxDate="maxDate" allowSameDay :show="show" confirmDisabledText="请选择起始日期和结束日期" mode="range" @confirm="confirmBtn" @close="closeBtn"></u-calendar>
    <!-- 删除订单弹框 -->
    <u-overlay :show="showDel">
      <view class="wrapper">
        <view class="block">
          <view class="block_title">提示</view>
          <view class="block_info">是否确定删除此订单</view>
          <view class="block_footer">
            <view class="block_footer_a" @click="onClickHide">取消</view>
            <view class="block_footer_b" @click="$noMultipleClicks(submitdele)">确定</view>
          </view>
        </view>
      </view>
    </u-overlay>
    <!-- 取消订单弹框 -->
    <u-overlay :show="shows">
      <view class="wrapper">
        <view class="block">
          <view class="block_title">提示</view>
          <view class="block_info">是否取消此订单</view>
          <view class="block_footer">
            <view class="block_footer_a" @click="DCqx">取消</view>
            <view class="block_footer_b" @click="$noMultipleClicks(bookingCancellation)">确定</view>
          </view>
        </view>
      </view>
    </u-overlay>
    <u-overlay :show="TDOPEN">
      <view class="wrapper">
        <view class="block">
          <view class="block_title">提示</view>
          <view class="block_info">是否申请退款此订单</view>
          <view class="block_footer">
            <view class="block_footer_a" @click="DCclose">取消</view>
            <view class="block_footer_b" @click="$noMultipleClicks(TDsubmit)">确定</view>
          </view>
        </view>
      </view>
    </u-overlay>
    <!-- 列表 -->
  </view>
</template>

<script>
export default {
  data () {
    return {
      noClick: true,
      color: `var(--color)`,
      showPop: false,
      minDate: this.formatDate(new Date().getTime() - 60 * 60 * 24 * 1000 * 90),
      maxDate: this.$app.firstQueryTime().slice(0, 10),
      defaultDateMultiple: [this.formatDate(new Date().getTime() - 60 * 60 * 24 * 1000 * 6), this.$app
        .firstQueryTime().slice(
          0, 10)
      ],
      show: false,
      list: [],
      page: 1,
      end: false,
      firstQueryTime: '',
      status: 'nomore',
      timeKjlist: [{
        name: '近7天',
        time: [this.formatDate(new Date().getTime() - 60 * 60 * 24 * 1000 * 6), this.$app
          .firstQueryTime()
          .slice(0, 10)
        ]
      }, {
        name: '近30天',
        time: [this.formatDate(new Date().getTime() - 60 * 60 * 24 * 1000 * 29), this.$app
          .firstQueryTime()
          .slice(0, 10)
        ]
      }, {
        name: '近90天',
        time: [this.formatDate(new Date().getTime() - 60 * 60 * 24 * 1000 * 89), this.$app
          .firstQueryTime()
          .slice(0, 10)
        ]
      }],
      lyList: [{
        name: '小程序端',
        value: '01'
      }, {
        name: '场馆PC端',
        value: '02'
      }],
      lxList: [],
      szLx: [],
      szLy: [],
      date: [],
      tabList: [{
        name: "全部",
        value: '',
        triggered: false,
      }, {
        name: "待付款",
        value: '0',
        triggered: false,
      }, {
        name: "已支付",
        value: '3',
        triggered: false,
      }, {
        name: "已取消",
        value: '2',
        triggered: false,
      }, {
        name: "已退款",
        value: '5',
        triggered: false,
      }],
      active: 0,
      ddid: '',
      orderType: '',
      shows: false, //取消订单弹框
      TDOPEN: false, //退订显示隐藏
      showDel: false, //删除订单弹框
    }
  },
  onLoad (options) {
    this.active = options.type || 0
    this.getLxList()
  },
  onShow () {
    this.reset()
  },
  methods: {
    jump (url, params, a) {
      this.$app.jump(url, params, a);
    },
    jump2 (url, params, a) {
      this.$app.jump2(url, params, a);
    },
    //单张图片预览
    previewImg (imgurl) {
      let _this = this;
      let imgsArray = [];
      imgsArray[0] = imgurl
      uni.previewImage({
        current: 0,
        urls: imgsArray
      });
    },
    czBtn () {
      this.szLx = []
      this.szLy = []
      this.date = []
      this.jumSearch()
    },
    jumpdesc (e) {
      // if (this.active == 0 || this.active == 1 || this.active == 2 || this.active == 4) {

      // } else if (this.active == 3) {
      // 	if (e.courseFlag == 1) {
      // 		this.jump('/pages/curriculum/detailb?id=', e.courseId)
      // 	} else {
      // 		this.jump('/pages/curriculum/orderDetail?id=', e.orderId)
      // 	}
      // }
      if (e.orderType == '22') {
        this.jump('/subPackages/foodOnline/detail?orderType=', e.orderType + '&id=' + e.businessId + '&orderId=' + e.orderId)
      } else {
        this.jump('/pages/order/detail?orderType=', e.orderType + '&id=' + e.businessId + '&orderId=' + e.orderId)
      }
    },
    DCdk (e) {
      this.shows = true
      this.orderType = e.orderType
      if (this.orderType == '02') {
        this.ddid = e.businessId
      } else {
        this.ddid = e.orderId
      }
    },
    DCqx () {
      this.shows = false
    },
    DCclose () {
      this.TDOPEN = false
    },
    // 退款
    CDTD (e) {
      this.TDOPEN = true
      this.orderType = e.orderType
      if (this.orderType == '02') {
        this.ddid = e.businessId
      } else {
        this.ddid = e.orderId
      }
    },
    TDsubmit () {
      // 订场 02  课程 07 门票 03 套餐 04 商品 06 点餐 12 活动 08
      if (this.orderType == '02') {
        this.$app.ajax({
          api: this.$api.sessionEstimation(),
          data: {
            userId: this.userInfo.id,
            param: {
              reserveAndOrderId: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '03') {
        this.$app.ajax({
          api: this.$api.ticketRefund(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '04') {
        this.$app.ajax({
          api: this.$api.mealsOnlineOrderPay(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '07') {
        this.$app.ajax({
          api: this.$api.noEnrollCourse(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '08') {
        this.$app.ajax({
          api: this.$api.activityCancelOrderMini(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '19') {
        this.$app.ajax({
          api: this.$api.specialCardOrderRefundByMp(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '06') {
        this.$app.ajax({
          api: this.$api.goodsListTk(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.TDOPEN = false
            this.$app.showToast('退款成功')
            this.reset()
          }
        }).catch(() => { })
      }
    },
    bookingCancellation () {
      // 订场 02  课程 07 门票 03 套餐 04 商品 06 点餐 12 活动 08
      if (this.orderType == '02') {
        this.$app.ajax({
          api: this.$api.bookingCancellation(),
          data: {
            userId: this.userInfo.id,
            param: {
              reserveAndOrderId: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '03') {
        this.$app.ajax({
          api: this.$api.cancelTicketOrder(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '20') {
        this.$app.ajax({
          api: this.$api.serviceOrderCancelPayByMp(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '04') {
        this.$app.ajax({
          api: this.$api.mealsOnlionCanlPay(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '07') {
        this.$app.ajax({
          api: this.$api.noEnrollCourse(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '06' || this.orderType == '12') {
        this.$app.ajax({
          api: this.$api.goodsQxzf(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '13') {
        this.$app.ajax({
          api: this.$api.cancelJcOrder(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '18') {
        // 器材
        this.$app.ajax({
          api: this.$api.equipmentLeaseCancelPay(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.ddid,
              flag: '1'
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '19') {
        // 器材
        this.$app.ajax({
          api: this.$api.specialCardOrderCancelPayByMp(),
          data: {
            userId: this.userInfo.id,
            param: {
              orderId: this.ddid,
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.shows = false
            this.$app.showToast('取消成功')
            this.reset()
          }
        }).catch(() => { })
      }
    },
    // 删除订单
    deleBtn (e) {
      this.showDel = true
      this.orderType = e.orderType
      if (this.orderType == '02') {
        this.ddid = e.businessId
      } else {
        this.ddid = e.orderId
      }
    },
    onClickHide () {
      this.showDel = false
    },
    // 删除订场订单
    submitdele () {
      // 订场 02  课程 07 门票 03 套餐 04 商品 06 点餐 12 活动 08  专项卡 19
      if (this.orderType == '02') {
        this.$app.ajax({
          api: this.$api.deleBooking(),
          data: {
            userId: this.userInfo.id,
            param: {
              reserveAndOrderId: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.showDel = false
            this.$app.showToast('删除成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '03') {
        this.$app.ajax({
          api: this.$api.ticketDeletion(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.showDel = false
            this.$app.showToast('删除成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '04') {
        this.$app.ajax({
          api: this.$api.mealsDelOrderPay(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.showDel = false
            this.$app.showToast('删除成功')
            this.reset()
          }
        }).catch(() => { })
      } else if (this.orderType == '13') {
        this.$app.ajax({
          api: this.$api.delJcOrder(),
          data: {
            userId: this.userInfo.id,
            param: {
              id: this.ddid
            }
          }
        }).then((res) => {
          if (res.errorCode === '000000') {
            this.showDel = false
            this.$app.showToast('删除成功')
            this.reset()
          }
        }).catch(() => { })
      }
    },
    // 继续支付订场
    continueToPay (e) {
      if (e.orderType == '02') {
        // 订场  businessId 
        this.jump('/pages/order/pay?type=1&payOrder=1&businessId=', e.businessId + '&orderId=' + e.orderId)
      } else if (e.orderType == '07') {
        //  课程
        this.jump('/pages/order/pay?type=2&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '03') {
        // 门票
        this.jump('/pages/order/pay?type=3&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '04') {
        // 套餐
        this.jump('/pages/order/pay?type=4&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '12') {
        // 点餐
        this.jump('/pages/order/pay?type=12&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '06') {
        // /商品 
        this.jump('/pages/order/pay?type=6&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '11') {
        // 兑换游戏币
        this.jump('/pages/order/pay?type=8&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '08') {
        // 活动 08
        this.jump('/pages/order/pay?type=6&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '13') {
        // 精彩 13
        this.jump('/pages/order/pay?type=13&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '18') {
        // 器材 18
        this.jump('/pages/order/pay?type=18&payOrder=1&orderId=', e.orderId)
      } else if (e.orderType == '19') {
        // 专项卡 19
        this.jump('/pages/order/pay?type=19&payOrder=1&orderId=', e.orderId)
      } else {
        this.jump('/pages/order/pay?type=' + e.orderType + '&payOrder=1&orderId=', e.orderId)
      }
    },
    tabclick (e) {
      this.active = e.index;
      this.reset()
    },
    timeClick (e) {
      this.date = e.time
      this.defaultDateMultiple = e.time
    },
    szBtn (item) {
      let arr = [...this.szLx]
      var index = arr.indexOf(item.id)
      if (index > -1) {
        arr.splice(index, 1);
      } else {
        arr.push(item.id)
      }
      this.szLx = arr
    },
    szlyBtn (item) {
      let arr = [...this.szLy]
      var index = arr.indexOf(item.value)
      if (index > -1) {
        arr.splice(index, 1);
      } else {
        arr.push(item.value)
      }
      this.szLy = arr
    },
    getLxList () {
      this.$app
        .ajax({
          data: {
            param: {
              venueId: this.venueId,
              type: "ORDER_TYPE_WX_LIST_QUERY"
            }
          },
          api: this.$api.getOrderType()
        })
        .then(res => {
          if (res.errorCode != '000000') return;
          this.lxList = res.recordList || []
        });

    },
    confirmBtn (e) {
      this.show = false
      this.date = [e[0], e[e.length - 1]]
    },
    onDisplay () {
      this.show = true
    },
    closeBtn () {
      this.show = false
    },
    formatDate (date) {
      var date = new Date(date)
      const year = date.getFullYear() + '-'
      const month = this.calculation(date.getMonth() + 1) + '-'
      const day = this.calculation(date.getDate())
      return year + month + day
    },
    calculation (s) {
      return s < 10 ? '0' + s : s
    },
    jumSearch () {
      this.showPop = false
      this.reset()
    },
    reset () {
      this.list = [];
      this.page = 1;
      this.firstQueryTime = this.$app.firstQueryTime()
      this.end = false;
      this.getList()
    },
    getList () {
      let date = this.date
      let startTime = ''
      let endTime = ''
      if (date.length > 0) {
        startTime = date[0] + ' 00:00:00'
        if (date.length > 1) {
          endTime = date[1] + ' 23:59:59'
        }
      }
      if (this.page == 1) {
        this.firstQueryTime = this.$app.firstQueryTime()
      }
      let orderChannel = [...this.szLy]
      let orderType = [...this.szLx]
      this.$app.ajax({
        data: {
          pagination: {
            firstQueryTime: this.firstQueryTime,
            page: this.page,
            rows: 10
          },
          param: {
            orderChannel: orderChannel.join(),
            orderType: orderType.join(),
            orderStatus: this.tabList[this.active].value,
            startTime,
            endTime
          }
        },
        api: this.$api.myOrderList()
      }).then((res) => {
        uni.stopPullDownRefresh()
        if (res.errorCode === '000000') {
          if (!res.recordList || res.recordList.length < 10) {
            this.end = true
          }
          if (res.recordList) {
            this.list = this.list.concat(res.recordList)
          }
        }
      }).catch(() => {
        uni.stopPullDownRefresh()
      })
    },
    reachBottom () {
      if (!this.end) {
        this.page += 1;
        this.getList();
      }
    },
    // 触底加载更多数据
    onReachBottom (e) {
      this.reachBottom()
    },
    onPullDownRefresh () {
      this.reset()
    },
  }
}
</script>
<style lang="scss" scoped>
.box_config {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin-bottom: 30rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    flex: 1;
  }
  .sxBtn {
    width: 110rpx;
    flex: none;
    image {
      width: 28rpx;
      height: 28rpx;
      vertical-align: middle;
      margin-right: 8rpx;
    }
  }

  // .head {
  // 	background-color: #fff;
  // 	padding: 30rpx;
  // 	box-sizing: border-box;

  // }
}

.popcnt {
  padding: 30rpx;
  box-sizing: border-box;
  max-height: 100vh;
  overflow-y: auto;

  .popBt {
    font-size: 30rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bolder;
    position: relative;
    color: #222222;
    text-align: center;
    padding: 10rpx 0 40rpx;
  }

  .sxBt {
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    margin: 30rpx 0;
  }

  .sxUl {
    flex-wrap: wrap;

    view {
      width: 154.5rpx;
      line-height: 64rpx;
      background: $bjColor;
      color: #333333;
      border-radius: 36rpx;
      text-align: center;
      margin-right: 24rpx;
      font-size: 26rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */

      &:nth-child(4n) {
        margin-right: 0;
      }

      &.on {
        background: $color;
        color: #fff;
      }
    }
  }

  .timeHead {
    width: 512rpx;
    line-height: 64rpx;
    background: bjColor;
    border-radius: 36rpx;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    background: $bjColor;

    text {
      flex: 1;
      text-align: center;
    }
  }
  .czBtn {
    color: #666666;
    width: 335rpx;
    line-height: 88rpx;
    background: $bjColor;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    margin-top: 30rpx;
  }

  .tjBtn {
    width: 335rpx;
    line-height: 88rpx;
    background: $color;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fff;
    text-align: center;
    margin-top: 30rpx;
  }
}

.orderLi {
  width: 690rpx;
  box-sizing: border-box;
  padding: 30rpx;
  background: #ffffff;
  border-radius: 8rpx;
  margin: 0 auto 20rpx;

  .head {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;

    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 10rpx;
      vertical-align: middle;
    }

    .right {
      font-size: 26rpx;

      &.hui {
        color: #666666;
      }
    }
  }

  .orderDetail {
    .detail {
      margin-top: 30rpx;

      .left {
        width: 88rpx;
        height: 88rpx;
        border-radius: 8rpx;
        margin-right: 24rpx;
        flex: none;
      }

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .name {
          font-size: 30rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #222222;
        }

        .time {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }

  .orderFoot {
    margin-top: 40rpx;

    .left {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      flex: none;

      text {
        font-size: 32rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #222222;
        margin-left: 5rpx;
      }
    }

    .right {
      justify-content: flex-end;

      view {
        width: 168rpx;
        border-radius: 34rpx;
        border: 1rpx solid #b2b2b2;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        text-align: center;
        line-height: 64rpx;
        margin-left: 20rpx;

        &:first-of-type {
          margin-left: 0;
        }

        &.on {
          border-color: $color;
          color: $color;
        }
      }
    }
  }
}

.hdDetail {
  margin-top: 30rpx;

  .left {
    white-space: nowrap;
    display: flex;
    width: calc(100% - 115rpx);

    image {
      width: 88rpx;
      height: 88rpx;
      border-radius: 8rpx;
      border: 1rpx solid #e5e5e5;
      box-sizing: border-box;
      margin-right: 16rpx;

      &:last-of-type {
        margin-right: 16rpx;
      }
    }
  }

  .right {
    width: 115rpx;
    height: 88rpx;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 1.5;
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;

    .price {
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
    }
  }
}
</style>